#wrap {
	margin: 20px auto;
	text-align: center;
	font-family: "Microsoft YaHei", "黑体", "宋体", "KaiTi", sans-serif;
}

#wrap br {
	display: none;
}
.btn-slide, .btn-slide2 {
	position: relative;
	display: inline-block;
	height: 50px;
	width: 200px;
	line-height: 45px;
	padding: 0;
	border-radius: 50px;
	background: #fdfdfd;
	border: 2px solid #0099cc;
	margin: 10px;
	transition: .5s;
}


.btn-slide2 {
	border: 2px solid #efa666;
}

.btn-slide:hover {
	color: #FFFFFF;
	background-color: #0099cc;
}

.btn-slide2:hover {
	color: #FFFFFF;
	background-color: #efa666;
}

.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
	right: 100%;
	margin-right: -45px;
	background-color: #fdfdfd;
	color: #0099cc;
}

.btn-slide2:hover span.circle2 {
	color: #efa666;
}

.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
	right: 40px;
	opacity: 0;
}

.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
	opacity: 1;
	right: 40px;
}

.btn-slide span.circle, .btn-slide2 span.circle2 {
	display: block;
	background-color: #0099cc;
	color: #fff;
	position: absolute;
	margin: 3px;
	line-height: 42px;
	height: 40px;
	width: 40px;
	top: 0;
	right: 0;
	transition: .5s;
	border-radius: 50%;
}
.btn-slide span .circle
{
	float: right;
}
.btn-slide span .circle
{
	float: left;
}

.btn-slide2 span.circle2 {
	background-color: #efa666;
}

.btn-slide span.title,
.btn-slide span.title-hover, .btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
	position: absolute;
	right: 90px;
	text-align: center;
	margin: 0 auto;
	font-size: 18px;
	font-weight: bold;
	color: #30abd5;
	transition: .5s;
}

.btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
	color: #efa666;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
	right: 80px;
	opacity: 0;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
	color: #fff;
}